<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="视频内容" name="1">
            <layout-pane label="使用场景">
                <el-radio-group v-model="usage">
                    <el-radio label="xcx">小程序</el-radio>
                    <el-radio label="webapp">网页应用</el-radio>
                </el-radio-group>
            </layout-pane>

            <template v-if="usage === 'webapp'">
                <el-row>
                    <el-col :span="24">
                        <el-input
                            v-model="widget.widgetData.eles.content"
                            :autosize="{ minRows: 4 }"
                            clearable
                            type="textarea"
                            placeholder="视频通用路径"
                        >
                        </el-input>
                    </el-col>
                </el-row>
                <template v-if="usage === 'webapp'">
                    <div class="tip-wrap">
                        <div>推荐视频网站：</div>
                        <a href="//v.qq.com/" target="_blank">腾讯视频</a>
                        <label>、</label>
                        <a href="//www.youku.com/" target="_blank">优酷</a>
                        <label>、</label>
                        <a href="//www.tudou.com/" target="_blank">土豆</a>
                    </div>
                </template>
            </template>
            <template v-else>
                <el-divider></el-divider>
                <layout-pane label="使用来源">
                    <el-radio-group v-model="usage">
                        <el-radio label="xcx">源文件</el-radio>
                        <el-radio label="tencentVideo">腾讯视频链接</el-radio>
                    </el-radio-group>
                </layout-pane>

                <el-row>
                    <el-col :span="24">
                        <el-input
                            v-model="widget.widgetData.eles.customFeature.videoSourceUrl"
                            :autosize="{ minRows: 4 }"
                            clearable
                            type="textarea"
                            :placeholder="usage === 'xcx' ? '请输入视频源文件链接' : '请输入腾讯视频链接'"
                        >
                        </el-input>

                        <template v-if="usage === 'tencentVideo'">
                            <div class="tip-txt-href">
                                <a href="https://v.qq.com/" target="_blank">前往腾讯视频获取</a>
                            </div>
                            <div class="tip-txt">提示：属于腾讯官方的视频，只能播放3分钟</div>
                        </template>
                    </el-col>
                </el-row>
            </template>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
export default defineComponent({
    name: 'VideoContent',
    components: {
        LayoutPane
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const usage = computed({
            get: () => widget.value.widgetData.eles.customFeature.usage,
            set: val => widget.value.widgetData.eles.customFeature.usage = val
        })

        return {
            widget,
            usage
        }
    }
})
</script>

<style lang="less" scoped>
.tip-wrap {
    display: flex;
    align-items: center;
    a {
        text-decoration: none;
        color: var(--edit-color-primary);
    }
}
.tip-txt-href {
    text-align: right;
    a {
        text-decoration: none;
        font-size: 12px;
        color: var(--edit-color-primary);
    }
}
.tip-txt {
    margin-top: 10px;
    font-size: 12px;
    color: var(--edit-color-info);
}
</style>